<template>
    <div class="loveTalk">
        <button @click="addloveTalk">
            获取一句土味情话
        </button>
        <ul>
            <!-- 
                    遍历我们的数组
                    每次遍历的时候是数组内的第一个////第二个,第三个对象
                    赋值到我talk中,然后我们再去调用talk的各种属性,所以能
                    更新.....
                    [{},{},{}]
             -->
            <li v-for="talk in talkLists" :key="talk.id">{{ talk.title }}</li>
        </ul>
    </div>
</template>
<script lang='ts' setup name='loveTalk'>
import { useLoveTalkStore } from '@/store/useLoveTalk';
import { storeToRefs } from 'pinia';
const loveTalk = useLoveTalkStore()
let { talkLists } = storeToRefs(loveTalk)
let { addloveTalk } = loveTalk
console.log(talkLists.value);

/* 
    通过 store 的 `$subscribe()` 方法侦听 `state` 及其变化
    可以在监听变化中进行一些操作,如经典的本地存储功能
    这段代码是使用 Vue.js 的 Pinia 状态管理库来订阅一个名为 loveTalk 的状态。
    当 loveTalk 状态发生变化时，会执行回调函数，将 talkList 的值存储到本地存储中。

    #subscribe中有
    mutate (Object)：包含有关发生更改的部分的信息。
    它有两个属性：type（更改类型）和path（更改路径）。
    state (any)：当前的 state 值


    
*/
loveTalk.$subscribe((mutate, state) => {
    console.log('LoveTalk', mutate, state)
    /* 
        localStorage.setItem 方法用于在用户的浏览器上存储数据。
        此数据没有过期时间，除非被清除，否则它将一直存在。
        (中有两个是一个键对值)  
         localStorage中存储的都是字符串
        如果你传的不是字符串
        那么底层会执行一个tostring导致我们的数据都变成了字符串,不是我们要用的样子
        我们通过JSON.stringify()方法
        存储这一对键对值数组,并且把数组转换成字符串的形式,并且是人类看得懂的字符串
        然后我们转到我们的pinia数据库中去

    */
    localStorage.setItem('talk', JSON.stringify(talkLists.value))
})
</script>
<style scoped>
div.loveTalk {
    background-color: chartreuse;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}

button {
    margin: 0 5px;
    height: 30px;
}
</style>